<template>
  <div style="width: 100vw; height: 100vh">
    <a-button @click="clickFn(1)">按钮1</a-button>
    <a-button @click="clickFn(2)">按钮2</a-button>
    <a-button @click="$router.back()">按钮3</a-button>
    <Coolmodel :visible.sync="visible" :id="id" :title="title">123123</Coolmodel>
  </div>
</template>

<script>
import { Coolmodel } from '@/components/index'
export default {
  components: {
    Coolmodel
  },
  data() {
    return {
      id: 0,
      visible: false,
      title: ''
    }
  },
  methods: {
    clickFn(id) {
      this.id = id
      if (id === 1) {
        this.title = '你是猪'
      } else {
        this.title = '笨猪'
      }
      this.visible = true
    },
    qqqqqq() {
      console.log(this.visible)
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
